<template>
  <div>
    <el-row>
      <p class="pinformation">适用范围</p>
      <p class="totalStyle">共 {{ form.handleJcxmList.length }} 条数据</p>
      <el-row style="padding-bottom: 5px; margin-left: 15px">
        <el-button link icon="View">查看检测方法文档</el-button>
      </el-row>
    </el-row>
    <el-table
      class="business"
      :data="form.handleJcxmList"
      ref="subTableRef"
      v-loading="loading"
    >
      <el-table-column label="序号" type="index" width="70" align="center" />
      <el-table-column
        label="前处理"
        align="center"
        width="130"
        prop="handle.handleMc"
      />
      <el-table-column
        label="检测类别"
        width="130"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template #default="scope">{{ scope.row.jclbNames }}</template>
      </el-table-column>
      <el-table-column
        width="150"
        label="检测项目"
        align="center"
        prop="jcxmName"
      >
      <template #default="scope">
            <span v-html="proxy.getSupAndSub(scope.row.jcxmName)"></span>
          </template>
        </el-table-column>
      <el-table-column width="130" label="组别" align="center" prop="groupId">
        <template #default="scope">
          <dict-tag :options="lims_jcxm_group" :value="scope.row.groupId" />
        </template>
      </el-table-column>
      <el-table-column
        width="130"
        label="方法检出限"
        align="center"
        prop="checkLimit"
      />
      <el-table-column
        label="机构检出限"
        align="center"
        prop="orgCheckLimit"
        width="150"
      />
      <el-table-column
        width="130"
        label="单位"
        align="center"
        prop="unitName"
      />
      <el-table-column
        width="130"
        label="检测下限"
        align="center"
        prop="checkDownLimit"
      />
      <el-table-column
        width="130"
        label="检测上限"
        align="center"
        prop="checkUpLimit"
      />
      <el-table-column
        width="130"
        label="条件"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template #default="scope">
          <template v-if="scope.row.condition"
            >当<span v-html="transformation(scope.row.condition)"></span
            >时</template
          >
        </template>
      </el-table-column>
    </el-table>

    <p class="pinformation" style="margin-top: 10px">
      方法文档中的适用范围截图
    </p>
    <screenshotView :fileList="form.fileList" :height="21"></screenshotView>
  </div>
</template>

<script setup>
import screenshotView from "../screenshotView/screenshotView";
import { getMethod } from "@/api/store/method";

const { proxy } = getCurrentInstance();
const { lims_jcxm_group } = proxy.useShareDict("lims_jcxm_group");

const form = ref({ handleJcxmList: [] });
const loading = ref(false);
const methodId = ref("");
const props = defineProps({
  methodId: {
    type: String, //参数类型
    required: true, //是否必须传递
  },
});

watch(
  () => props.methodId,
  () => {
    if (!props.methodId) return;
    methodId.value = props.methodId;
    getList();
  },
  { deep: true, immediate: true }
);

function getList() {
  loading.value = true;
  getMethod(methodId.value).then((response) => {
    form.value = response.data;
    loading.value = false;
  });
}

function transformation(row) {
  const a = proxy.getSupAndSub(row);
  return a;
}

const heightParams = ref([{ tableName: "sub", bottomHeight: 300 }]);
function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}
onMounted(() => {
  nextTick(function () {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
})
onUpdated(() => {
  nextTick(function () {
    getTableHeight();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});
</script>
